<template>
	<view class="bottom-nav-wrap">
		<view class="fixed-nav-box" 
		:class="{
			'fixed-card': type == 'card' || type == 'enterprise',
			'fixed-bks': type == 'bks'
		}">
			<view class="fboxRow Ycenter fixed-nav">
				<template v-if="type == 'index'">
					<view class="fboxCol Ycenter Xcenter flex1" :class="[active == item.name ? 'active': '']" 
					v-for="(item, index) in list" :key="index" @click="changeNav(item,index)">
						<image class="icon" v-if="active == item.name" :src="item.selectedIconPath"></image>
						<image class="icon" v-else :src="item.iconPath"></image>
						<view class="tit font22 mt8">{{item.text}}</view>
					</view>
				</template>
				<template v-else-if="type == 'bks'">
					<view class="fboxCol Ycenter Xcenter flex1" :class="[active == item.name ? 'active': '']" 
					v-for="(item, index) in bksList" :key="index" @click="bksNav(item,index)">
						<image class="icon" v-if="active == item.name" :src="item.selectedIconPath"></image>
						<image class="icon" v-else :src="item.iconPath"></image>
						<view class="tit font22 mt8">{{item.text}}</view>
					</view>
				</template>
				<template v-else>
					<view class="fboxCol Ycenter Xcenter flex1" :class="[_active == item.menuCode ? 'active': '']" 
					v-for="(item, index) in company.list" :key="index" @click="changeNav(item,index)">
						<image class="icon" :src="item.menuIcon" mode="aspectFit"></image>
						<view class="tit font22 mt8">{{item.menuName}}</view>
					</view>
				</template>
			</view>
			<view class="space"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: { // 选中  id，name
				type: String,
				default: ''
			},
			detail:{ // 名片详情或者企业详情
				type: Object,
				defaul: () => {
					return {}
				}
			},
			company: { // 企业信息
				type: Object,
				defaul: () => {
					return {}
				}
			},
			userId:{ // 用户ID
				type: String,
				default: ''
			},
			type:{
				type: String,
				default: 'index' // 类型，card 名片详情，enterprise 企业详情， index 首页/名片夹/我的， bks 备考生
			},
		},
		options: { styleIsolation: 'shared' },
		computed:{
			_active:{
				get(){
					return this.active
				},
				set(val){
					this.$emit('update:active',val)
				}
			}
		},
		data() {
			return {
				list: [{
					"pagePath": "pages/index/index",
					"h5Path": "/index/index",
					"wechatPath": "/pages/index/index",
					"iconPath": require('@/static/tab1.png'),
					"selectedIconPath": require('@/static/tab1.on.png'),
					"name": 'index',
					"text": "首页"
				}, {
					"pagePath": "pages/card/index",
					"h5Path": "/card/index",
					"wechatPath": "/card/index",
					"iconPath":  require("@/static/tab2.png"),
					"selectedIconPath":  require("@/static/tab2.on.png"),
					"name": 'card',
					"text": "名片夹"
				},{
					"pagePath": "pages/index/mine",
					"h5Path": "/mine",
					"wechatPath": "/mine",
					"iconPath":  require("@/static/tab3.png"),
					"selectedIconPath": require("@/static/tab3.on.png"),
					"name": 'mine',
					"text": "我的"
				}],
				bksList:[{
					"pagePath": "pagesBKS/index/examinee",
					"h5Path": "/bks/index/examinee",
					"wechatPath": "/pagesBKS/index/examinee",
					"iconPath": require('@/static/img/bks/tabBar/index.jpg'),
					"selectedIconPath": require('@/static/img/bks/tabBar/indexOn.jpg'),
					"name": 'index',
					"text": "首页"
				}, {
					"pagePath": "pagesBKS/datum/index",
					"h5Path": "/bks/datum/index/index",
					"wechatPath": "/pagesBKS/datum/index",
					"iconPath":  require('@/static/img/bks/tabBar/datum.jpg'),
					"selectedIconPath":  require('@/static/img/bks/tabBar/datumOn.jpg'),
					"name": 'datum',
					"text": "资料"
				},{
					"pagePath": "pagesBKS/volunteer/index",
					"h5Path": "/bks/volunteer/index/index",
					"wechatPath": "/pagesBKS/volunteer/index",
					"iconPath":  require('@/static/img/bks/tabBar/volunteer.jpg'),
					"selectedIconPath":  require('@/static/img/bks/tabBar/volunteerOn.jpg'),
					"name": 'volunteer',
					"text": "志愿"
				},{
					"pagePath": "pagesBKS/mine/index",
					"h5Path": "/bks/mine/index/index",
					"wechatPath": "/pagesBKS/mine/index",
					"iconPath":  require('@/static/img/bks/tabBar/mine.jpg'),
					"selectedIconPath":require('@/static/img/bks/tabBar/mineOn.jpg'),
					"name": 'mine',
					"text": "我的"
				}],
			}
		},
		mounted() {
			console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync())
		},
		methods: {
			changeNav(item,i) {
				try{
					if(this.type == 'index'){
						if(this.active != item.name){
							// #ifdef H5
								// this.$pageTo(item.h5Path, 'reLaunch')
								uni.reLaunch({
									url: item.h5Path
								});
							// #endif
							// #ifdef MP
								// this.$pageTo(item.wechatPath, 'reLaunch')
								uni.reLaunch({
									url: item.wechatPath
								});
							// #endif
						}
					}else{
						this._active = item.menuCode
					}
				}catch(e){
					//TODO handle the exception
					console.log(e)
				}
			},
			bksNav(item,i) {
				try{
					uni.reLaunch({
						url: item.h5Path
					});
				}catch(e){
					//TODO handle the exception
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-nav-wrap { height: calc(100rpx + env(safe-area-inset-bottom));}

	.fixed-nav-box {
		// padding: 0 0 54rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		z-index: 999;
		background-color: var(--viewBgColor);
		border-top: 1rpx solid var(--backgroundDivisionColor);
	}
	.fixed-nav{ height: 100rpx;}
	.icon{width: 48rpx;height: 48rpx;}
	.tit{line-height: 28rpx;color: var(--contentFontFourColor);}
	.active .tit{color: var(--contourButtonTextColor);}
	.space{ width: 100%;padding-bottom:calc(2rpx + env(safe-area-inset-bottom));}
	.fixed-bks .active .tit{color: #00C15D;}
	.fixed-card{}
	.fixed-card .icon{filter: grayscale(100%) hue-rotate(180deg) brightness(0.5) contrast(200%);}
	.fixed-card .active{filter: grayscale(100%) hue-rotate(180deg) brightness(0.5) contrast(200%);}
</style>